<style scoped>
  .search-element-box-right .el-select{
    width: 100px;
  }
  .input-with-select .el-input-group__prepend {
    background-color: #fff;
  }
</style>
<template>
  <el-row>
    <LogListModal :visible.sync="isShowLogDetail" :currentId="currentId"></LogListModal>
    <el-col :span="24">
      <el-card class="search-form">
          <el-form ref="searchForm" class="el-form-col el-form-s" :model="search">
            <el-row :gutter="15" style="position:relative;">
              <el-col :lg="4" :md="6">
                <el-form-item prop="runningNo" style="position:relative;">
                  <el-input v-model="search.runningNo" clearable placeholder="流水号"></el-input>
                </el-form-item>
              </el-col>
              <el-col :lg="4" :md="6">
                <el-form-item prop="runningTypeCode" style="position:relative;">
                  <el-select v-model="search.runningTypeCode" clearable placeholder="类型">
                    <el-option
                      v-for="item in lsTypeArr"
                      :key="item.value"
                      :label="item.text"
                      :value="item.value">
                    </el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :lg="4" :md="6">
                <el-form-item prop="way">
                  <el-select v-model="search.way" clearable placeholder="方式">
                    <el-option
                      v-for="item in wayArr"
                      :key="item.value"
                      :label="item.text"
                      :value="item.value">
                    </el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :lg="4" :md="6" class="hidden-lg-only hidden-xl-only">
                <el-form-item>
                  <el-row class="search-btns" :gutter="5">
                    <el-col :span="12">
                      <el-button type="primary" :loading="searchLoading" plain native-type="submit" @click.prevent="searchFunc(search)"><span>搜索</span></el-button>
                    </el-col>
                    <el-col :span="12">
                      <el-button @click="resetFields" plain>重置</el-button>
                    </el-col>
                  </el-row>
                </el-form-item>
              </el-col>
              <el-col :lg="4" :md="6">
                <el-form-item prop="startTime">
                  <el-date-picker type="date" clearable
                                  placeholder="开始时间"
                                  v-model="search.startTime"
                                  value-format="yyyy-MM-dd"
                                  style="width: 100%;"></el-date-picker>
                </el-form-item>
              </el-col>
              <el-col :lg="4" :md="6">
                <el-form-item prop="endTime">
                  <el-date-picker type="date" clearable
                                  placeholder="结束时间"
                                  v-model="search.endTime"
                                  value-format="yyyy-MM-dd"
                                  style="width: 100%;"></el-date-picker>
                </el-form-item>
              </el-col>
              <el-col :lg="4" :md="6" class="hidden-md-only hidden-sm-only">
                <el-form-item>
                  <el-row class="search-btns" :gutter="5">
                    <el-col :span="12">
                      <el-button type="primary" :loading="searchLoading" plain native-type="submit" @click.prevent="searchFunc(search)"><span>搜索</span></el-button>
                    </el-col>
                    <el-col :span="12">
                      <el-button @click="resetFields" plain>重置</el-button>
                    </el-col>
                  </el-row>
                </el-form-item>
              </el-col>
            </el-row>
          </el-form>
          <div class="clearfix"></div>
      </el-card>
    </el-col>

    <el-col :span="24">
      <el-table
        :data="tableData"
        style="width: 100%"
        stripe>
        <el-table-column
          align="center">
          <template slot-scope="scope">
            <span style="font-weight: 700; font-size: 20px;">{{scope.row.runningNo}}</span>
            <span style="display:inline-block; width:100%">{{scope.row.foundtime | unixTimestampFilter}}</span>
          </template>
        </el-table-column>
        <el-table-column
          align="left"
          prop="businessTypes">
          <template slot-scope="scope">
            <span ><span style="font-weight: 700; font-size: 20px;">{{scope.row.runningTypeCode | filterDataBaseDictionary}}</span><span v-if="scope.row.way">({{scope.row.way}})</span> </span>
            <span style="display:inline-block; width:100%">{{scope.row.tradingObjectName}}  <span v-if="scope.row.tradingObjectName">:</span>{{scope.row.tradingObjectNum}}</span>
            <!--<p style="margin-left: 10px">(？？银行名？尾号)</p>-->
          </template>
        </el-table-column>
        <el-table-column
          align="center"
          prop="workerName">
          <template slot-scope="scope">
            <span style="font-weight: 700; font-size: 20px;">{{(scope.row.in_out == 2) ? '-' : '+'}}{{scope.row.money}}</span>
            <span style="display:inline-block; width:100%" v-if="scope.row.serviceFee">手续费：{{scope.row.serviceFee}}</span>
          </template>
        </el-table-column>
        <el-table-column
          align="center"
          prop="memo">
        </el-table-column>
        <el-table-column
          align="center">
          <template slot-scope="scope">
            <a href="javascript:;"  style="color: #26a1ab;"
               @click="showDetail(scope.row.runingId)">详情</a>
          </template>
        </el-table-column>
      </el-table>
      <div>
        <Pagination class="pull-right" :total-item="params.totalItem" :per-item="params.pageSize" :totalItem="totalItem"
                    @sizeChange="sizeChange" @pagination="pagination"  ></Pagination>
      </div>
    </el-col>

  </el-row>
</template>
<script>
import LogListModal from '@/views/fhb/myWallet/LogListModal'
import {getLsType} from '@/utils/selectOptions'
import Pagination from '@/components/Pagination'
import {filterDataBaseDictionary, unixTimestampFilter} from '@/filters'
import {merge, dotData, copy} from '@/utils'
// import modalFrame from 'components/base/modalFrame'
// import {mapActions} from 'vuex'
export default {
  name: 'logListIndex',
  components: {
    LogListModal,
    Pagination
  },
  filters: {
    filterDataBaseDictionary,
    unixTimestampFilter
  },
  data() {
    return {
      isOpen: false,
      visible: false,
      searchLoading: false,
      isShowLogDetail: false,
      searchOpen: false,
      lsTypeArr: [], // 流水类型
      wayArr: [], // 方式？
      params: {
        pageSize: 10,
        pageNum: 1
      },
      search: {
        runningNo: '',
        way: '',
        runningTypeCode: '',
        startTime: '',
        endTime: ''
      },
      totalItem: 0,
      tableData: [],
      currentId: ''
    }
  },
  created() {
    this.getWay()
    getLsType().then(data => {
      this.lsTypeArr = data
    })
    this.httpGetTable()
  },
  computed: {},
  watch: {},
  methods: {
    // httpGetResponse
    getWay() {
      this.$ajax.get('/ms-fahuobao-user/wallet/get-way').then(response => {
        if (dotData(response, 'success')) {
          const arr = dotData(response, 'data')
          if (Array.isArray(arr)) {
            let temp = []
            arr.forEach(v => {
              temp.push({value: v, text: v})
            })
            this.wayArr = temp
            console.log('333', this.wayArr)
          }
        }
      })
    },
    searchFunc(search) {
      // this.searchLoading = true
      this.httpGetTable()
    },
    sizeChange(size) {
      this.params.pageSize = size
      this.httpGetTable()
    },
    pagination(page) {
      this.params.pageNum = page
      this.httpGetTable()
    },
    // 流水
    httpGetTable() {
      let data = merge(this.params, copy(this.search, true))
      this.$ajax.table('/ms-user-wallet/wallet/wallet-bill-running-log-list', data).then(response => {
        const success = dotData(response, 'success')
        if (success) {
          this.tableData = dotData(response, 'data')
          this.totalItem = dotData(response, 'totalItem')
        }
        // this.tableData = response || []
        console.log('response', response)
        console.log('this.tableData', this.tableData)
      })
    },
    showDetail(rowId) {
      console.log('---------', rowId)
      this.currentId = rowId
      this.isShowLogDetail = true
    },
    resetFields() {
      this.$refs['searchForm'].resetFields()
      console.log('222222222', this)
    }
  }
}
</script>
